// Categories.vue的逻辑代码
export default {
  created() {
    this.getData();
  },
  data() {
    return {
      // table的数据
      categoryList: [],
      cat_id: 1,
      // 分页信息
      reqParams: {
        pagenum: 1,
        pagesize: 5
      },
      total: 0,
      // 2 添加分类的数据
      addDialogFormVisible: false,
      rules: {
        cat_name: [{ required: true, message: "分类名称必填", trigger: "blur" }]
      },
      addForm: {
        cat_pid: 0,
        cat_name: "",
        cat_level: ""
      },
      // 级联选择器的数据
      selectedCateArr: [], //选中的分类的id的数组
      cascaderOptions: [], // 只拥有两层分类的数据
      checkStrictly: {
        expandTrigger: "hover",
        value: "cat_id",
        label: "cat_name"
      },
      // 3 编辑分类的按钮
      editDialogFormVisible: false,
      editForm: {
        cat_name: "",
        cat_id: ""
      }
    };
  },
  methods: {
    // 1分页函数
    pager(newPage) {
      // 根据当前的页码 重新获取数据
      this.reqParams.pagenum = newPage;
      this.getData();
    },
    // 2 获取数据
    async getData() {
      const {
        data: { data, meta }
      } = await this.$http.get(`categories`, {
        params: this.reqParams
      });
      if (meta.status !== 200) return this.$message.error("获取分类数据失败");
      this.categoryList = data.result;
      this.total = Math.ceil(data.total / data.pagesize);
    },
    // 3 点击添加，弹出对话框
    openAddDialog() {
      this.addDialogFormVisible = true;
      this.$nextTick(async () => {
        this.$refs.addForm.resetFields();
        this.selectedCateArr = [];
        const {
          data: { data, meta }
        } = await this.$http.get("categories", { params: { type: 2 } });
        if (meta.status !== 200) return this.$message.error("获取分类数据失败");
        this.cascaderOptions = data;
      });
    },
    // 级联选择器被改变后
    handleChange(value) {
      // console.log(value);
      this.selectedCateArr = value;
    },
    // 4 点击确定,进行添加
    addCate() {
      this.$refs.addForm.validate(async valid => {
        if (valid) {
          let cat_pid = 0;
          if (this.selectedCateArr.length) {
            cat_pid = this.selectedCateArr[this.selectedCateArr.length - 1];
          }
          this.addForm.cat_pid = cat_pid;
          this.addForm.cat_level = this.selectedCateArr.length;
          const {
            data: { meta }
          } = await this.$http.post("categories", this.addForm);
          if (meta.status !== 201) return this.$message.error("添加分类失败");
          this.$message.success("添加分类成功");
          this.getData();
          this.addDialogFormVisible = false;
        }
      });
    },
    // 5 点击编辑按钮,打开弹框
    openEditDialog(row) {
      this.editDialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs.editRefs.resetFields();
        this.editForm.cat_name = row.cat_name;
        this.editForm.cat_id = row.cat_id;
      });
    },
    // 6 点击确定,进行编辑
    editCate() {
      this.$refs.editRefs.validate(async valid => {
        if (valid) {
          const {
            data: { meta }
          } = await this.$http.put(`categories/${this.editForm.cat_id}`, {
            cat_name: this.editForm.cat_name
          });
          if (meta.status !== 200) return this.$message.error("编辑分类失败");
          this.$message.success("编辑分类成功");
          this.getData();
          this.editDialogFormVisible = false;
        }
      });
    },
    // 7 点击删除按钮,进行删除
    delCate(id){
      this.$confirm("确定删除该分类吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const {
            data: { meta }
          } = await this.$http.delete(`categories/${id}`);
          if (meta.status !== 200) return this.$message.error("删除用户失败");
          this.getData();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
